<template>
  <div class="page-scan-mana">
    <el-form :inline="true" :model="dataQueryForm" ref="dataQueryForm">
      <div class="pc-page-header">
        <el-form-item  prop="grNo">
          <el-input v-model="dataQueryForm.grNo" clearable  class="pc-input3-col5" placeholder="输入货单编号"></el-input>
        </el-form-item>
        <el-form-item  prop="isDeleted">
          <el-select v-model="dataQueryForm.isDeleted"  placeholder="选择货单状态" class="pc-input3-col5" >
            <el-option v-for="item in isDeletedOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  prop="goodsClass">
          <el-select v-model="dataQueryForm.goodsClass" multiple collapse-tags placeholder="选择货物品类" class="pc-input3-col5" >
            <el-option v-for="item in goodsClassOption" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item  prop="goodsNameCn">
          <el-input v-model="dataQueryForm.goodsNameCn" clearable  class="pc-input3-col5" placeholder="输入货物名称"></el-input>
        </el-form-item>
        <el-form-item  prop="countryOrigin" v-show="isshowMore">
          <el-input v-model="dataQueryForm.countryOrigin" clearable  class="pc-input3-col5" placeholder="输入原产地"></el-input>
        </el-form-item>
        <el-form-item  prop="vendorNo" v-show="isshowMore">
          <el-input v-model="dataQueryForm.vendorNo" clearable  class="pc-input3-col5" placeholder="输入厂号"></el-input>
        </el-form-item>
        <el-form-item  prop="storageCity" v-show="isshowMore">
          <el-input v-model="dataQueryForm.storageCity" clearable  class="pc-input3-col5" placeholder="输入存放地"></el-input>
        </el-form-item>
        <el-form-item  prop="companyName" v-show="isshowMore">
          <el-input v-model="dataQueryForm.companyName" clearable  class="pc-input3-col5" placeholder="输入货主企业"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" @click="queryDataFn">搜索</el-button>
          <el-button type="primary" @click="refresh('dataQueryForm')">刷新</el-button>
          <el-button @click="showMore()">{{showMoreText}}</el-button>
        </el-form-item>
      </div>
    </el-form>
    <egrid border class="page-list"
           :data="tableData"
           :columns="columns"
           :columns-schema="columnsSchema"
           :columns-props="columnsProps">
    </egrid>

    <div class="pc-pagination-panel">
      <pc-pagination ref="pcPagination" :url="pageUrl.queryDataList" :queryData="dataQueryForm"
                     @on-query="queryCallBackFn">
      </pc-pagination>
    </div>
    <pc-dialog :is-show="isShowDetailDialog" title='货单详情' @on-close="isShowDetailDialog = false">
      <div>
        <detail :id="detailId">
        </detail>
      </div>
    </pc-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import PcPagination from 'components/form/pagination';
  import PcButton from 'components/form/button';
  import PcDialog from 'components/dialog';
  import EgridCellView from 'components/wms/comm/EgridCellView.vue';
  import Detail from 'views/hdzs/query/gr/detail.vue';

  // 货单编号链接详情
  var grNoLink = {
    template: ` <el-button class="gr-no" @click="viewdetail(row)" type="text" size="small">{{this.row.grNo}}</el-button>`,
    props: ['row'],
    computed: {
      showHandle() {
        return this.row.isEditable;
      }
    },
    methods: {
      viewdetail(val) {
        that.detailId = val.id;
        this.$emit('gr-detail', val);
      }
    }
  };

  let that;

  export default {
    data () {
      return {
        isshowMore: false,
        showMoreText: '更多',
        detailId: '',
        isShowDetailDialog: false,
        dataQueryForm: {
          grNo: null,
          isDeleted: null,
          goodsClass: [],
          goodsNameCn: null,
          countryOrigin: null,
          vendorNo: null,
          storageCity: null,
          companyName: null
        },
        tableData: [],
        columns: [
          {
            label: '货单编号',
            // prop: 'grNo'
            component: grNoLink,
            listeners: {
              'gr-detail' (val) {
                that.viewDetailFn(val);
              }
            }
          },
          {
            label: '货单状态',
            prop: 'isDeletedDisplay'
          },
          {
            label: '货物品类',
            prop: 'goodsClassDisplay'
          },
          {
            label: '货物名称',
            prop: 'goodsNameCn'
          },
          {
            label: '原产地',
            prop: 'countryOrigin'
          },
          {
            label: '厂号',
            prop: 'vendorNo'
          },
          {
            label: '存放地',
            prop: 'storageCity'
          },
          {
            label: '货主企业',
            prop: 'companyName'
          },
          {
            label: '联系人',
            prop: 'contactName'
          },
          {
            label: '联系电话',
            prop: 'contactMobileNo'
          },
          {
            label: '分享次数',
            prop: 'shareCount'
          },
          {
            label: '转发次数',
            prop: 'repeatCount'
          },
          {
            label: '收藏次数',
            prop: 'favorCount'
          }
        ],
        columnsSchema: {
          '货单编号': {minWidth: 160},
          '货物名称': {minWidth: 100},
          '货主企业': {minWidth: 200},
          '联系电话': {minWidth: 120}
        },
        // columnsProps 用于定义所有 columns 公共的属性，
        // 这里属性可以参考这里： http://element.eleme.io/#/zh-CN/component/table#table-column-attributes
        columnsProps: {
          height: 40,
          minWidth: 90,
          showOverflowTooltip: true,
          component: EgridCellView
        },
        isDeletedOption: [
          {
            value: '0',
            label: '有效'
          }, {
            value: '1',
            label: '无效'
          }
        ],
        goodsClassOption: [
          {
            value: '1',
            label: '牛'
          }, {
            value: '2',
            label: '羊'
          }
        ],
        // columnsHandler 可用于在现有的 columns 进行操作，对 columns 进行增删改，这里新增了操作列
        pageUrl: {
          queryDataList: '/hdzs/gr/getWebGrList'
        }
      };
    },
    components: {
      PcPagination, PcButton, PcDialog, Detail
    },
    created () {
      that = this;
    },

    methods: {
      // 表头样式
      getHeaderStyle({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background: #f5f5f5; height: 50px';
        } else {
          return '';
        }
      },
      getRowClass({ row, column, rowIndex, columnIndex }) {
        if (rowIndex === 0) {
          return 'background:rgb(245, 245, 245);';
        } else {
          return '';
        }
      },
      viewDetailFn (scopeRow) {
        this.isShowDetailDialog = true;
      },
      openMessage() {
        this.$notify.info({
          title: '自定义位置',
          message: '右下角弹出的消息',
          position: 'bottom-right'
        });
      },
      showMore () {
        this.isshowMore = !this.isshowMore;
        if (this.isshowMore) {
          this.showMoreText = '收起';
        } else {
          this.showMoreText = '更多';
        }
      },
      queryCallBackFn (res) {
        this.tableData = res.result.list;
      },
      queryDataFn () {
        console.log(this.tableData);
        this.$refs.pcPagination.queryListWithPageFn(true);
      },
      refresh (formName) {
        this.$refs[formName].resetFields();
        this.dataQueryForm.grNo = null;
        this.dataQueryForm.isDeleted = null;
        this.dataQueryForm.goodsClass = [];
        this.dataQueryForm.goodsNameCn = null;
        this.dataQueryForm.countryOrigin = null;
        this.dataQueryForm.vendorNo = null;
        this.dataQueryForm.storageCity = null;
        this.dataQueryForm.companyName = null;
        this.queryDataFn();
      },
      // 选择订单状态变化时回调函数
      handleChange(val) {
        let that = this;
        this.dataQueryForm.goodsClass = [];
        // 循环取出选择的状态数据，转换成数字
        val.forEach(function (value, index) {
          if (value) {
            that.dataQueryForm.goodsClass.push(parseInt(value));
          }
        });
      }
    }
  };
</script>
<style>
  .page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail{
    width: 146px;
    height: 146px;
    display: block;
    position:relative;
  }
  .page-scan-mana .el-upload-list--picture-card .el-upload-list__item-thumbnail:before{
    content: "\E614";
    position: absolute;
    top: 18px;
    left: 40px;
    color: #b3b3b3;
    font-size: 60px;
    font-family: "maliiconfont" !important;
  }
  .page-scan-mana .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close
  {
    display: none;
  }
  .page-scan-mana .topClassEditInfo .el-upload-list--picture-card .el-upload-list__item .el-icon-close-tip
  {
    display: none;
  }
  .page-gr-list .gr-no {
    padding: 5px 0px !important;
  }
</style>
